﻿<table class="table table-sm table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th>食材名称</th>
            @if (Items.Any())
            {
                @foreach (var attr in Items.First().Attributes)
                {
                    <th>@attr.Key</th>
                }
                <th>&nbsp;</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr class="@GetRowClassString(item)">
                @if (IsEditing(item))
                {
                    <td>
                        <AutoComplete Value="@item.Name" OnCustomFilter="OnFilter" OnValueChanged="@OnIngredientChanged" />
                    </td>
                }
                else
                {
                    <td>@item.Name</td>
                }
                @foreach (var attr in item.Attributes)
                {
                    if (IsEditing(item))
                    {
                        <td>
                            <BootstrapInput Value="attr.Value" />
                        </td>
                    }
                    else
                    {
                        <td>@attr.Value</td>
                    }
                }
                <td>
                    <div class="ingre-toolbar">
                        @if(IsEditing(item))
                        {
                            <a class="ingre-button">
                                <i class="fa fa-times" @onclick="() => Cancel(item)"></i>
                            </a>
                            <a class="ingre-button">
                                <i class="fa fa-save" @onclick="Save"></i>
                            </a>
                        }
                        else
                        {
                            <a class="ingre-button">
                                <i class="fa fa-edit" @onclick="() => Update(item)"></i>
                            </a>
                            <a class="ingre-button">
                                <i class="fa fa-plus" @onclick="() => Add(item)"></i>
                            </a>
                            <a class="ingre-button">
                                <i class="fa fa-minus" @onclick="() => Delete(item)"></i>
                            </a>
                            <a class="ingre-button">
                                <i class="fa fa-chevron-up" @onclick="() => MovePrev(item)"></i>
                            </a>
                            <a class="ingre-button">
                                <i class="fa fa-chevron-circle-up" @onclick="() => MoveFirst(item)"></i>
                            </a>
                            <a class="ingre-button">
                                <i class="fa fa-chevron-circle-down" @onclick="() => MoveLast(item)"></i>
                            </a>
                            <a class="ingre-button">
                                <i class="fa fa-chevron-down" @onclick="() => MoveNext(item)"></i>
                            </a>
                        }
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>
